<template>
  <div id="app">
    <div id="nav" v-if="!$route.meta.noshow">
    <van-tabbar route v-model="active" active-color="black">
      <van-tabbar-item replace to="/" :class="{shouye:$route.meta.shouye}">首页
        <template #icon>
          <img :src="!$route.meta.shouye ? home.inactive : home.active" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item replace to="/foodBuy">菜篮
      <template #icon="props">
          <img :src="props.active ? icon.active : icon.inactive" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item replace to="/loveBox">收藏
      <template #icon="props">
          <img :src="props.active ? sc.active : sc.inactive" />
      </template>
      </van-tabbar-item>
    </van-tabbar>
    </div>
    <keep-alive exclude="MenuDetail,NoteDetail">
      <router-view  @placeholder="placeholder = $event" :placeholder="placeholder" @searchword="searchword = $event" :searchword="searchword"/>
    </keep-alive>
  </div>
</template>

<script>
import icon_inactive from "@/assets/images/cailan.png"
import icon_active from "@/assets/images/cailan_active.png"
import sc_inactive from "@/assets/images/sc.png"
import sc_active from "@/assets/images/sc_active.png"
import shouye from "@/assets/images/shouye.png"
import shouye_active from "@/assets/images/shouye_active.png"
export default {
  data: function(){
    return{
      placeholder: null,
      searchword:null,
      active: 0,
      icon: {
        active: icon_active,
        inactive: icon_inactive,
      },
      home: {
        active: shouye_active,
        inactive: shouye,
      },
      sc: {
        active: sc_active,
        inactive: sc_inactive,
      },
    }
  },
}
</script>
<style lang="less">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  height: 100vh;
  .van-tabbar{
    height: 60px;
  }
  #nav {
    position: fixed;
    bottom: 0;
    left: 0;
    height: 60px;
    width: 100%;
    z-index: 100;
    // border-top: 1px solid rgb(236, 234, 234);
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: white;
    .shouye{
      color: black;
    }
    a {
      font-weight: bold;
      color: #999999;
      text-decoration: none;
      &.router-link-exact-active {
        color: black;
      }
    }
  }
}

</style>
